<template>
	<u-popup v-model="show" mode="center" borderRadius="28" @close="clear">
		<view class="container bgf">
			<view class="bg"></view>
			<view class="content">
				<view class="f32 title t-flex center bold">上传合同</view>
				<fileSelect v-model="form.scheme_file" :max="1">
					<view class="input t-flex center">
						+上传文件
					</view>
				</fileSelect>
				
				<view class="tips f24 mt20">支持上传jpg、png、bmp、jpeg、gif、pdf、mp4、psd等文件格式</view>
				
				<view class="list t-flex wrap mt20">
					<fileBox :list="form.scheme_file" @close="del"></fileBox>
				</view>
				
				
				<view class="btns t-flex between">
					<view class="btn t-flex center f30" @click="show = false">取消</view>
					<view class="btn t-flex center confirm f30" @click="confirm">确认</view>
				</view>
			</view>
			
			
			
		</view>
	</u-popup>



<u-toast ref="uToastE" />
</template>

<script setup lang="ts">
import { showToast } from "../../lib/ts/util";
import fileSelect from "../forms/fileSelect.vue"
import { reactive, ref } from 'vue';

	const emit = defineEmits(['success'])
	const uToastE = ref()

	let show = ref(false)
	
	let form = reactive({
		scheme_file:[],
	})
	
	const clear = ()=>{
		form.scheme_file = []
	}
	
	
	const open = ()=>{
		show.value = true
	}
	
	const del = (index)=>{
		uni.showModal({
			title:'提示',
			content:'是否要移除此项？',
			success(e) {
				if(e.confirm){
					form.scheme_file.splice(index,1)
				}
			}
		})
	}
	
	const confirm = async ()=>{
		if(!form.scheme_file.length) return showToast('请上传文件')
		let ht_info = form.scheme_file.map((item=>item.url)).join(',')
		emit('success',ht_info)
		show.value = false
	}
	

	defineExpose({
		open
	})

</script>

<style scoped lang="scss">
	@keyframes move {
		from{
			transform: translateX(40rpx);
			opacity: .5;
		}
	}
	
	.container{
		width: 640rpx;
		position: relative;
		.bg{
			width: 100%;
			height: 160rpx;
			background: linear-gradient( 180deg, #FFD0D4 0%, #FFFFFF 100%);
			border-radius: 28rpx;
			position: absolute;
			left: 0;
			right: 0;
		}
		.content{
			position: relative;
			z-index: 2;
			padding: 40rpx;
		}
		.title{
			color:#232323 ;
		}
		.input{
			width: 100%;
			height: 88rpx;
			background: #F8F8F8;
			border-radius: 44rpx;
			border: 2rpx solid #EAEAEA;
			padding: 0 30rpx;
			margin-top: 40rpx;
			color: $main-color;
		}
		.btn{
			margin-top: 80rpx;
			width: 270rpx;
			height: 80rpx;
			background: #F3F3F3;
			border-radius: 40rpx;
			color: #999;
		}
		.btn.confirm{
			background-color: $main-color;
			color: #fff;
		}
	}
	
	.tips{
		color: #FF8300;
		text-align: center;
	}
	
	.img{
		display: inline-block;
		margin-right: 12rpx;
		margin-bottom: 12rpx;
		animation: move 300ms;
	}
	.img:nth-child(5n){
		margin-right: 0;
	}
</style>